import React from 'react'
import style from './Edit.module.scss'
import EditCanvas from './EditCanvas'
import { useLoadQuestionData } from '../../hooks/useLoadQuestionData'
import { useDispatch } from 'react-redux'
import { changeSelectedId } from '../../store/componentsReducer'
import LeftPanel from './LeftPanel'
import RightPanel from './RightPanel'
import EditHeader from './EditHeader'

export default function Edit() {
  const { loading } = useLoadQuestionData()
  const disptach = useDispatch()

  // 点击画布空白区域清空选中
  function clickContent() {
    disptach(changeSelectedId(''))
  }

  return (
    <>
      <div className={style.container}>
        <div className={style.header}>
          <EditHeader />
        </div>
        <div className={style.content}>
          <div className={style.left}>
            {/* 左侧面板 */}
            <LeftPanel />
          </div>
          <div className={style.center} onClick={clickContent}>
            <div className={style.canvas}>
              {/* 画布区域 */}
              <EditCanvas loading={loading} />
            </div>
          </div>
          <div className={style.right}>
            {/* 右侧面板 */}
            <RightPanel />
          </div>
        </div>
      </div>
    </>
  )
}
